<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./lib/swiper-5.4.5/swiper.css">
    <title>Document</title>
</head>

<body>
    <!--           头部           -->
    <div class="head">
        <div class="container">
            <a class="logo" title="英雄联盟官网">
                <img src="https://game.gtimg.cn/images/lol/v3/logo-public.png">
            </a>
            <ul class="head-nav">
                <li>
                    <a>
                        <span class="head-nav-title">游戏资料</span>
                        <span class="head-nav-subtitle">GAME INFO</span>
                    </a>
                </li>
                <li>
                    <a>
                        <span class="head-nav-title">商城/合作</span>
                        <span class="head-nav-subtitle">STORE</span>
                    </a>
                </li>
                <li>
                    <a>
                        <span class="head-nav-title">社区互动</span>
                        <span class="head-nav-subtitle">COMMUNITY</span>
                    </a>
                </li>
                <li>
                    <a>
                        <span class="head-nav-title">赛事官网</span>
                        <span class="head-nav-subtitle">ESPORTS</span>
                    </a>
                </li>
                <li>
                    <a>
                        <span class="head-nav-title">自助系统</span>
                        <span class="head-nav-subtitle">SYSTEM</span>
                    </a>
                </li>
            </ul>
            <!-- 玩家信息 -->
            <div class="head-userinfo-normal">
                <span class="head-userinfo-avatar"></span>
                <div class="head-userinfo-brief">
                    <p>亲爱的召唤师，欢迎<a>登录</a></p>
                </div>
            </div>
            <!-- 手机图标 -->
            <span class="head-app-normal">
                <a>手机</a>
            </span>
            <!-- 搜索图标 -->
            <span class="head-search-btn">
                <a>搜索</a>
            </span>
            <!-- 查看详情 -->
            <div class="comm-topact-inner">
                <a class="top-act-link">查看详情</a>
                <!-- 版本详情 -->
                <div class="top-version">
                    当前游戏版本
                    <em>Ver 10.25</em>
                    <div>
                        <a>版本详情</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!------         首页内容         ------>
    <div class="container">
        <div class="m-promo">
            <!--      选项卡轮播图      -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./images/01.jpg">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/02.jpg">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/03.jpg">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/04.jpg">
                    </div>
                    <div class="swiper-slide">
                        <img src="./images/05.jpg">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
            <div class="promo-title-list">
                <span>战队皮肤限时销售</span>
                <span>至臻终章2020</span>
                <span>全明星定妆照曝光</span>
                <span>五哈英雄联盟特辑</span>
                <span>杨澜对话阿布</span>
            </div>
        </div>


        <!--      最新资讯      -->
        <!-- <div class="new-news">
            <div class="news-top">
                <span>综合</span>
                <span>公告</span>
                <span>赛事</span>
                <span>攻略</span>
                <span>社区</span>
            </div>
            <ul class="news-content">
                <li>
                    <h3>2020LPL全明星周末主题曲《挺身而出》GALA乐队版MV</h3>
                </li>
                <li>
                    <h3>1月1日免费英雄更换公告</h3>
                </li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div> -->
    </div>


    <!-- 引入轮播图 初始化swiper -->
    <script src="./js/index.js"></script>
    <script src="./lib/swiper-5.4.5/swiper.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            autoplay: true//等同于以下设置
            /*autoplay: {
              delay: 3000,
              stopOnLastSlide: false,
              disableOnInteraction: true,
              },*/
        });
    </script>

</body>

</html>